// colors
$colors: (
	'primary': #737373,
	'white': #fff,
	'black': #000,
	'active': #8fd0cc,
	'lightgrey': #b3b3b3,
	'bordercolor': #d4d9de,
	'backgroundcolor': #fff,
	'decorate': #ff6d6d,
	'darkgrey': #3c4858,
);

$border-color: map_get($colors, 'bordercolor');

// font size
$base-font-size: 1rem;

$font-sizes: (
	xs: 0.625,
	// 10px
		sm: 0.75,
	// 12px
		sl: 0.857,
	// 14px
		md: 1,
	// 16px
		lg: 1.125,
	// 18px
		xl: 1.25,
	// 20px
		xxl: 1.375,
	// 22px
		xxxl: 1.5,
	// 24px
		gsl: 2,
	// 32px
		gml: 3,
	// 48px
		gxl: 4,
	// 64px
);

// flex
$flex-jc: (
	start: flex-start,
	end: flex-end,
	center: center,
	between: space-between,
	around: space-around,
);

$flex-ai: (
	start: flex-start,
	end: flex-end,
	center: center,
	stretch: stretch,
);

// spacing
$spacing-types: (
	m: margin,
	p: padding,
);

$spacing-direction: (
	t: top,
	r: right,
	b: bottom,
	l: left,
);

$spacing-base-size: 1rem;

$spacing-sizes: (
	0: 0,
	1: 0.25,
	2: 0.5,
	3: 1,
	4: 1.5,
	5: 3,
);
